<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
    <title>后台管理 | 用户管理</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        tr input {
            width: 100%;
            height: auto;
        }
    </style>
    <script>
        function search() {
            var kw = $("#kw").val();
            if(kw)
                window.location="${pageContext.request.contextPath}/admin/searchPerson/"+kw;
        }
    </script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-sm">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="${pageContext.request.contextPath}/admin//manageProduct/1">商品管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="${pageContext.request.contextPath}/admin//manageNote/1">评论区管理</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="${pageContext.request.contextPath}/admin//managePerson/1">用户管理</a>
            </li>
        </ul>

        <ul class="nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">${sessionScope.user}</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" onclick="showFrame('${pageContext.request.contextPath}/user/modify/',500,400)">修改个人信息</a>
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/user/logout">登出</a>
                </div>
            </li>
            <li class="nav-item">
                <a target="_blank" class="nav-link btn btn-outline-primary btn-sm" href="${pageContext.request.contextPath}/">首页</a>
            </li>
        </ul>
    </nav>
    <hr/>

    <div class="card bg-light text-dark">
        <div class="card-body">
            <div class="form-inline float-left" >
                <input id="kw" name="kw" class="form-control" type="text" placeholder="关键字" value="${kw}">
                <button class="btn btn-success" type="button" onclick="search()">搜索</button>
            </div>
            <strong id="sm-info" class="text-danger float-right"></strong>
        </div>
    </div>

    <table class="table">
        <thead>
        <tr>
            <th class="text-center">账号</th>
            <th class="text-center">名称</th>
            <th class="text-center">密码</th>
            <th class="text-center">类型</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="plist">
        <c:forEach items="${list}" var="person">
        <tr <c:if test="${person.type == 1}">class="table-primary"</c:if>>
            <td class="text-center">${person.id}</td>
            <td class="text-center"><input id="pname${person.id}" class="form-control" type="text" value="${person.name}" readonly="readonly"/></td>
            <td class="text-center"><input id="ppwd${person.id}" class="form-control" type="text" value="${person.password}" readonly="readonly"/></td>
            <td class="text-center">
                <select id="ptype${person.id}" class="form-control" name="type" disabled="disabled">
                    <option value="0" selected>普通用户</option>
                    <option value="1" <c:if test="${person.type == 1}">selected</c:if>>管理员</option>
                </select>
            </td>
            <td id="op${person.id}" class="text-center">
                <a class="btn-warning btn-sm" onclick="modifyPerson('${person.id}')">修改</a>&nbsp
                <a class="text-light btn-danger btn-sm" onclick="showFrame('${pageContext.request.contextPath}/admin/deletePerson/${person.id}')">删除</a>
            </td>
        </tr>
        </c:forEach>
    </table>
    <div id="add_btn" class="text-center text-light"><a class="btn btn-success" onclick="addPerson()">添加</a></div>


    <div >
        <ul id="page_list" class="pagination justify-content-center" style="margin-top: 10px"></ul>
    </div>
</div>
<c:if test="${not empty count}">
    <script src="${pageContext.request.contextPath}/static/js/pagination.js"></script>
    <script>
        var count = ${count};
        pagination($("#page_list"), ${page}, Math.ceil(count / 10), "${pageContext.request.contextPath}/admin/managePerson/");
    </script>
</c:if>
<script>
    var content_path = "${pageContext.request.contextPath}";
    function modifyPerson(ID){
        var pname = $("#pname"+ID);
        var ppwd = $("#ppwd"+ID);
        var ptype = $("#ptype"+ID);
        if(typeof(pname.attr("readonly"))=="undefined"){
            $.ajax({
                url: content_path+"/admin/updatePerson",
                type:'POST',
                data: {"id":ID,"name": pname.val(), "password": ppwd.val(), "type": ptype.val()},
                dataType:'json',
                success:function(data){
                    if(data["result"]==1){
                        location.reload();
                    }
                    $("#sm-info").text(data['info']);
                    setTimeout(function () {
                        $("#sm-info").text("");
                    }, 3000);
                }
            });
        }else {
            pname.removeAttr("readonly");
            ppwd.removeAttr("readonly");
            ptype.removeAttr("disabled");
            $("#op"+ID).append("<a class='btn-light btn-sm ' onclick='javascript:location.reload()'>取消</a>")
        }
    }

    function addPerson() {
        if($("#pidadd").length==0)
            $("#plist").append("<tr id='tradd' class='table-info'>\n" +
                "            <td class='text-center'><input id='pidadd' class='form-control' type='text' placeholder='请输入账号' required></td>\n" +
                "            <td class='text-center'><input id='pnameadd' class='form-control' type='text' placeholder='请输入名字' required></td>\n" +
                "            <td class='text-center'><input id='ppwdadd' class='form-control' type='text' placeholder='请输入密码' required></td>\n" +
                "            <td class='text-center'>\n" +
                "                <select id='ptypeadd' class='form-control' name='type'>\n" +
                "                    <option value='0'>普通用户</option>\n" +
                "                    <option value='1'>管理员</option>\n" +
                "                </select>\n" +
                "            </td>\n" +
                "            <td class='text-center'>\n" +
                "                <a class='btn btn-success btn-sm text-light' onclick='submitaddPerson()'>添加</a>&nbsp;\n" +
                "                <a class='btn btn-light btn-sm ' onclick='cancel()'>取消</a>&nbsp;\n" +
                "            </td>\n" +
                "        </tr>")
        $("#add_btn").empty();
    }
    function submitaddPerson() {
        if($("#pidadd").val()==""|| $("#ppwdadd").val()==""){
            $("#sm-info").text("账号密码不可为空");
            setTimeout(function () {
                $("#sm-info").text("");
            }, 3000);
            return;
        }
        $.ajax({
            url: content_path+"/admin/addPerson",
            type:'POST',
            data:{"id":$("#pidadd").val(),"name": $("#pnameadd").val(), "password": $("#ppwdadd").val(), "type": $("#ptypeadd").val()},
            dataType:'json',
            success:function(data){
                if(data["result"]==1){
                    location.reload();
                }
                $("#sm-info").text(data['info']);
                setTimeout(function () {
                    $("#sm-info").text("");
                }, 3000);
            }
        });
    }
    function cancel() {
        $("#tradd").remove();
    }
</script>
<script src="${pageContext.request.contextPath}/static/js/showFrame.js"></script>
</body>
</html>
